<template>
	<view>
		<u-navbar title="商品海报" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<!-- <image v-if="picture2" :src="picture2" mode="widthFix"></image> -->
			<view>
				<l-painter
					:css="'width: 750rpx; padding-bottom: 20px; background: linear-gradient(180deg,#ffffff 0%,'+theme_color+' 100%)'"
					@fail="fail" @done="done" pathType="url" ref="poster1" performance>
					<!-- 	<l-painter-image
						src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
						css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;" />
					<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
						<l-painter-text text="隔壁老王"
							css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold" />
						<l-painter-text text="为您挑选了一个好物?" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
					</l-painter-view> -->
					<l-painter-view
						css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
						<l-painter-image :src="info.img_gallery[0].img_original"
							css="object-fit: contain; object-position: 50% 50%; width: 606rpx; height: 606rpx;" />
						<l-painter-view
							css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
							<l-painter-text text="￥" css="vertical-align: bottom" />
							<l-painter-text :text="info.shop_price" css="vertical-align: bottom; font-size: 58rpx" />
							<l-painter-text :text="'/'+ info.unit" css="vertical-align: bottom" />
							<l-painter-text :text="'￥'+info.market_price +'/'+ info.unit"
								css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
						</l-painter-view>
					<!-- 	<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
							<l-painter-text text="自营" css="color: #212121; background: #ffb400;"/>
							<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9;" />
							<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />
							<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9" />
						</l-painter-view> -->
						<l-painter-view css="margin-top: 30rpx; display: flex;">
							<l-painter-view css="flex:5;">
								<l-painter-text uid="tag"
									css="padding: 5rpx 10rpx; color: #212121; background: #ffb400; font-size: 24rpx;display:block;"
									:text="'商家:平台自营'"></l-painter-text>
								<l-painter-text uid="tag" v-if="info.sdg_id == 0"
									css="padding: 5rpx 10rpx; color: #BC7D63; background: #FEF8EA; font-size: 24rpx;display:block;margin-top:10px;"
									:text="'分享预估佣金:￥'+info.share_money"></l-painter-text>		
								<l-painter-text uid="tag" v-else
									css="padding: 5rpx 10rpx; color: #BC7D63; background: #FEF8EA; font-size: 24rpx;display:block;margin-top:10px;"
									:text="'分销预估佣金:￥'+info.yjpt_price"></l-painter-text>	
								<l-painter-text
									css="display:block; padding-top: 20rpx; box-sizing: border-box; color: #333333; line-height: 1.4em; font-size: 36rpx;"
									:text="info.goods_name"></l-painter-text>
							</l-painter-view>
							<l-painter-view css="flex:1;"></l-painter-view>
							<l-painter-view css="flex:2">
								<l-painter-image :src="qrcodeImg"
									css="object-fit: cover; width: 140rpx; height: 140rpx;margin:0 auto;" />
							</l-painter-view>
						</l-painter-view>
					</l-painter-view>
				</l-painter>
			</view>

			<view style="padding: 20px;">
				<u-button type="success" @click="saveImage" text="保存"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	import {
		toLogin
	} from "@/libs/login";
	import {
		mapGetters
	} from "vuex";
	import {
		wxa
	} from '@/api/public.js'
	import {
		goods_info
	} from "@/api/store.js";
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [{
			methods: options
		}],
		computed: mapGetters(["isLogin", "app_token","user_id"]),
		data() {
			return {
				goods_id: '',
				navH: '',
				theme_color: getApp().globalData.theme_color,
				qrcodeImg: '',
				sceneObj: {}, // 携带参数的对象
				picture2: '',
				info: {
					// goods_name,
					// img_gallery: [{
					// 	thumb_url: ''
					// }]
				},
			}
		},
		onLoad(e) {
			var that = this;
			this.goods_id = e.goods_id;
			
			this.navH = getApp().globalData.navHeight / 2;
			uni.showLoading({
				title: '绘制名片中...'
			})
			goods_info({
				goods_id: that.goods_id,
			}).then(res => {
				that.info = {
					...res.data
				};
				wxa({
					scene: 'gid='+that.goods_id+',sid='+that.user_id,
					supplier_id: that.info.supplier_id,
					to_page: 'pages/goods/detail/index',
					// market_type: getApp().globalData.market
				}).then(res => {
					uni.hideLoading()
					if (res.status == 1) {
						that.qrcodeImg = 'data:image/png;base64,' + res.data
						// console.log("qrcodeImg----------------")
						// console.log(that.qrcodeImg)
						that.paint()

					} else {
						that.$util.Tips({
							title: res.msg
						})
					}
				})
			})
		},
		methods: {
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
				uni.hideLoading()
			},
			paint() {
				this.$refs.poster1.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						this.picture2 = res.tempFilePath
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},
			// 保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.picture2,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>